import React from 'react'
import { Input } from 'antd'
import { useMyDispatch, useMySelector, MyShallEqual } from '../../../store'
import { setTitle } from '../../../store/modules/create'

const TitleName: React.FC = () => {
  const dispatch = useMyDispatch()
  const { title } = useMySelector(
    (state) => ({
      title: state.code.title
    }),
    MyShallEqual
  )
  const onChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    if (e.currentTarget.value.length > 40) {
      alert('标题长度不能超过40')
      return
    } else dispatch(setTitle(e.currentTarget.value))
  }
  return (
    <>
      <Input allowClear onChange={onChange} value={title} />
    </>
  )
}

export default TitleName
